<!doctype html>
<html>
<head>
    <include file="public:headtop"/>
    <link href="/static/css/general.css" rel="stylesheet">
    <link href="/static/css/cate.css" rel="stylesheet">
    <style>
        #Jiangli {
            font-size: 20px;
            margin: 20px 0;
            text-align: center;
        }

        #Jiangli b.jiangli {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<include file="public:headmini1"/>
<div class="container">
    <h2 class="box-title">
        <a href="{:U('Index/rule')}" class="pull-right">查看奖励规则</a>
        添加商品计算奖励
    </h2>
    <form action="">
        <table class="table">
            <tr>
                <td width="30%">
                    <select name="cate" id="cate" class="form-control">
                        <option value="">类别</option>
                    </select>
                </td>
                <td width="70%">
                    <select name="goods" id="goods" class="form-control" required>
                        <option value="">产品</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" name="num" value="1" id="num" class="form-control" required min="1"/>
                </td>
                <td>
                    <button class="btn btn-block" type="submit">添加</button>
                </td>
            </tr>
        </table>
    </form>

    <div class="media-list" style="margin-top: 10px">
    </div>


    <div id="Jiangli">奖励总计：￥<b class="jiangli">0.00</b>元</div>

</div>

<script type="text/html" id="Tpl">
    <div class="media">
        <h3 class="media-title">
        </h3>
        <div class="media-text">
            <span class="media-text-item">数量：
            <div class="p_num" style="display: inline-block;">
                <span class="sy_minus" id="sy_minus_gid1">-</span>
                <input class="sy_num" id="sy_num_gid1" readonly="" type="text" name="number1" value="1">
                <span class="sy_plus" id="sy_plus_gid1">+</span>
            </div>
            </span>
            <span class="media-text-item">奖励：￥<span class="reword"></span>元</span>
                <span class="media-text-item float-right">
                    <a href="javascript:;" class="media-remove">移除</a>
                </span>
        </div>
    </div>
</script>

<script>
    function RewordItem(options) {
        var _options = {};
        if(options) $.extend(_options, options);
        this._options = _options;

        this.per = _options.per;

        var html = document.getElementById(_options.tpl).innerHTML;
        var _ = this._ = $(html);

        _.find('.media-title').html(_options.title);
        this.$number = _.find('.sy_num');
        this.$reword = _.find('.reword');

        var self = this;
        _.find('.media-remove').click(function() {
            _options.rewordChange(-1 * self.number * self.per);
            _.remove();
        });

        _.find('.sy_plus').click(function() {
            self.calc(1);
        });

        _.find('.sy_minus').click(function() {
            self.calc(-1);
        });

        this.number = 0;
        this.calc(_options.number);
    };

    RewordItem.prototype.render = function() {
        return this._;
    };

    RewordItem.prototype.calc = function (nc) {
        var after = this.number + nc;
        if(after >= 0) {
            this.number = after;
            this._options.rewordChange(nc * this.per);
            this.$number.val(after);
            this.$reword.text((after * this.per).toFixed(2));
        }
    };

    $(function() {
        var $cate = $('#cate');
        var $goods = $('#goods');
        var $num = $('#num');

        $.getJSON("{:U('calc_data')}", function(data) {
            var calcData = data.data;

            for(var i=0; i<calcData.length; i++) {
                $cate.append($('<option value="' + i +  '">' + calcData[i]['name'] +  '</option>'));
            }

            $cate.change(function() {
                var idx = $cate.val();
                var goods = calcData[idx]['goods'];
                $goods.empty();

                if(goods && goods.length > 0) {
                    for(var i=0; i<goods.length; i++) {
                        $goods.append($('<option value="' + goods[i]['jianglie'] +  '">' + goods[i]['title'] +  '</option>'));
                    }
                } else {
                    $goods.append($('<option value="">没有此类产品</option>'));
                }
            });
        });

        var mList = $('.media-list');
        var $jiangli = $('.jiangli');
        var jiangli = 0;
        var onRewordChange = function (change) {
            jiangli += change;
            if(jiangli < 0 ) jiangli = 0;
            $jiangli.text(jiangli.toFixed(2));
        };

        $('form').submit(function(evt) {
            evt.preventDefault();
            var item = new RewordItem({
                rewordChange: onRewordChange,
                number: parseInt($num.val()),
                title: $goods.find('option:selected').text(),
                tpl: "Tpl",
                per: parseFloat($goods.val())
            });

            item.render().appendTo(mList);
            this.reset();
        });
    });

</script>

</body>
</html>
